<template>
  <div class="feedback-management">
    <div class="card">
      <div class="card-header">
        <h2>用户反馈</h2>
      </div>

      <div class="feedback-list">
        <div
            v-for="feedback in feedbacks"
            :key="feedback.feedbackId"
            class="feedback-item"
        >
          <div class="feedback-header">
            <span class="user-info">
              <i class="icon-user"></i>
              (ID: {{ feedback.uid }})反馈类型：{{ feedback.feedbackType}}
            </span>
            <span class="feedback-time">{{ $formatDate(feedback.submitTime) }}</span>
          </div>
          <div class="feedback-content">
            <p>{{ feedback.feedbackContent }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { format } from 'date-fns';
import { ElMessage } from 'element-plus'

export default {
  name: 'FeedbackManagement',
  data() {
    return {
      feedbacks: [],
      showReplyDialogVisible: false,
      currentFeedback: null,
      replyContent: ''
    }
  },
  created() {
    this.fetchFeedbacks();
  },
  // 修改FeedbackManagement.vue中的方法
  methods: {
    async fetchFeedbacks() {
      try {
        const response = await this.$http.get('/admin/getFeedback')
        this.feedbacks = response.data // 注意访问response.data
      } catch (error) {
        console.error('获取用户反馈失败:', error)
        this.$message.error('获取用户反馈失败')
      }
    },
  }
}
</script>

<style scoped>
.feedback-management {
  padding: 20px;
}

.feedback-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.feedback-item {
  background-color: white;
  border-radius: 6px;
  padding: 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.feedback-item.unread {
  border-left: 4px solid #1976d2;
}

.feedback-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #607d8b;
  font-size: 14px;
}

.user-info i {
  margin-right: 5px;
}

.feedback-content {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.feedback-actions {
  display: flex;
  gap: 10px;
}

.btn-reply, .btn-mark {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.btn-reply {
  background-color: #2196f3;
  color: white;
}

.btn-mark {
  background-color: #4caf50;
  color: white;
}

.btn-reply i, .btn-mark i {
  margin-right: 5px;
}

.feedback-preview {
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  margin-bottom: 15px;
}
</style>